<template>
    <el-form ref="form"
      :class="formClass"
      :model="localModel"
      :rules="rules"
      :label-width="labelWidth">
        <template v-for="item in formItems">
          <el-form-item v-if="item.type==='dateRange'" :label="item.label" required>
            <el-col :span="11">
              <el-form-item :prop="item.name1" :disabled="item.disabled">
                <el-date-picker type="date" :placeholder="item.placeholder1" v-model="localModel[item.name1]" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item :prop="item.name2" :disabled="item.disabled">
                <el-date-picker type="date" :placeholder="item.placeholder2" v-model="localModel[item.name2]" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item v-else :label="item.label" :prop="item.name" :key="item.name" :disabled="item.disabled">
            <el-input v-if="item.type==='text'" v-model="localModel[item.name]" :placeholder="item.placeholder"></el-input>
            <el-input v-else-if="item.type==='area'" type="textarea" :rows="5" v-model="localModel[item.name]" :placeholder="item.placeholder"></el-input>
            <el-input v-else-if="item.type==='number'" v-model.number="localModel[item.name]" :placeholder="item.placeholder"></el-input>
            <el-select v-else-if="item.type==='select'" v-model="localModel[item.name]" :placeholder="item.placeholder">
              <el-option v-for="opt in item.data" :key="opt.value" :label="opt.label" :value="opt.value"></el-option>
            </el-select>
            <el-date-picker v-else-if="item.type==='date'" :placeholder="item.placeholder" v-model="localModel[item.name]"></el-date-picker>
            <my-upload v-else-if="item.type==='singleImage' || item.type==='singleFile'" :form-item="item" @uploadSuccess="uploadSuccess"></my-upload>
          </el-form-item>
        </template>
    </el-form>
</template>

<script>
  import MyUpload from '../MyUpload';
  export default {
    name: 'MyForm',
    props: {
      formClass:{
        type: String,
        required: false,
      },
      model:{
        type: Object,
        required: false,
      },
      labelWidth:{
        type: String,
        required: true,
      },
      formItems:{
        type: Array,
        required: true,
      }
    },
    components:{
      MyUpload,
    },
    data() {
        return {
          localModel:{},
        }
    },
    computed:{
      rules() {
        let rules = {};

        this.formItems.forEach(function (item) {
          if(item.name){
            rules[item.name] = item.rule;
          }
          if(item.name1){
            rules[item.name1] = item.rule1;
          }
          if(item.name2){
            rules[item.name2] = item.rule2;
          }
        })

        return rules;
      },
      nowModel(){
        return this.localModel;
      }
    },
    created(){
      if(this.model){
        this.localModel = {...this.model};
      }
    },
    watch: {
      model: function (newModel) {
        this.localModel={...newModel};
      }
    },
    methods:{
      validate(cb){
        this.$refs['form'].validate(valid=>{
          cb(valid)
        })
      },
      uploadSuccess(data){
        let findedFormItem = this.formItems.find(function(item){
          return item.name===data.name;
        })
        if(findedFormItem){
          if(findedFormItem.type==='singleImage' || findedFormItem.type==='singleFile'){
            this.localModel[data.name]=data.filePath
          }
        }
      }
    }
  }
</script>

<style lang="stylus">
</style>
